<template>
    <div>
        <Modal v-model="modal" @on-ok="ok('form')" @on-cancel="cancel('form')" :loading="loading" title="修改密码">
        	<IForm :model="form" ref="form" :label-width="100" :rules="formRule" >
		        <FormItem label="新密码" prop="password">
		            <IInput v-model="form.password" placeholder="请输入新密码" type="password"></IInput>
		        </FormItem>
		        <FormItem label="确认新密码" prop="password_confirmation">
		            <IInput v-model="form.password_confirmation" placeholder="请输入确认新密码" type="password"></IInput>
		        </FormItem>
		    </IForm>
        </Modal>
    </div>
</template>
<script>
    import Modal from 'iview/src/components/modal';
    import Form from 'iview/src/components/form';
    import Input from 'iview/src/components/input';
    import Button from 'iview/src/components/button';

    import Axios from 'admin/config/axios';

    export default {

        components:{
            Modal,
            'IInput' : Input,
			'IForm' : Form,
			'FormItem' : Form.Item,
			'IButton' : Button,
        },
        data () {
        	const validatePasswordAgain=(rule , value ,callback)=>{
	            if(this.form.password!=this.form.password_confirmation ){
	                callback(new Error('密码不匹配'));
	            }
	            callback();
	        };
            return {
                modal: false,
                loading : true,
                form :{
                	password : '',
                	password_confirmation  : '',
                },
                formRule : {
	                password: [
	                    { required: true, message: '请填写密码', trigger: 'blur' },
	                    { type: 'string', min: 6, max:15, message: '密码长度6-15位', trigger: 'blur' }
	                ],
	                password_confirmation: [
	                    { required: true, message: '请填写确认新密码', trigger: 'blur' },
	                    { validator: validatePasswordAgain, trigger: 'blur'}
	                ]
	            },
            }
        },
        methods: {
        	changeLoading(){
	            this.loading = false;
	            this.$nextTick(() => {
	              this.loading = true;
	            });
	        },
        	ok(name){
        		this.$refs[name].validate(valid => {
        			if (!valid) {this.changeLoading();return false;}
        			Axios.Password(this.form)
	                .then(res =>{
	                	this.changeLoading();
	                	if(!res) return false;
	                    setTimeout(function(){window.location.href="/admin";},1000);
	                })
        		})
        	},
        	cancel(name){
        		this.$refs[name].resetFields();
        	}
        },
        
    }
</script>